<script setup lang="ts">
import type { NoticeVO } from '@/services/model/noticeModel';
import { getNoticePage } from '@/services/api/notice';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';

const noticeList = ref<NoticeVO[]>([]);
const loading = ref(false);
const finished = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);

// 获取公告列表
async function getNoticeList(isRefresh = false) {
  if (loading.value)
    return;

  loading.value = true;
  if (isRefresh) {
    pageNum.value = 1;
    finished.value = false;
  }

  try {
    const res = await getNoticePage({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    });

    if (res.list.length === 0) {
      finished.value = true;
      if (isRefresh) {
        noticeList.value = [];
      }
    } else {
      if (isRefresh) {
        noticeList.value = res.list;
      } else {
        noticeList.value = [...noticeList.value, ...res.list];
      }
      pageNum.value++;
    }
  } finally {
    loading.value = false;
    uni.stopPullDownRefresh();
  }
}

// 下拉刷新
onPullDownRefresh(() => {
  getNoticeList(true);
});

// 上拉加载更多
onReachBottom(() => {
  if (!finished.value) {
    getNoticeList();
  }
});

// 查看公告详情
function viewDetail(id: number) {
  uni.navigateTo({
    url: `/pages/notice/detail?id=${id}`,
  });
}

// 格式化时间
function formatTime(timeStr: string) {
  return timeStr.split(' ')[0];
}

onMounted(() => {
  getNoticeList();
});
</script>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部标题 -->
    <view class="sticky top-0 z-10 bg-white shadow-sm px-4 py-3 flex items-center">
      <uni-icons type="notification" size="24" color="#3B82F6" />
      <text class="ml-2 text-lg font-bold text-gray-800">
        公告通知
      </text>
    </view>

    <!-- 公告列表 -->
    <view class="px-4 py-2">
      <!-- 置顶公告 -->
      <template v-if="noticeList.some(item => item.isTop)">
        <view class="mb-4">
          <text class="text-sm text-gray-500">
            置顶公告
          </text>
          <view
            v-for="item in noticeList.filter(item => item.isTop)"
            :key="`top-${item.id}`"
            class="mt-3 p-4 bg-white rounded-lg shadow-sm border-l-4 border-blue-500"
            @click="viewDetail(item.id)"
          >
            <view class="flex justify-between items-center mb-2">
              <text class="font-semibold text-blue-600">
                {{ item.title }}
              </text>
              <view class="px-2 py-1 bg-blue-100 rounded-full">
                <text class="text-xs text-blue-600">
                  置顶
                </text>
              </view>
            </view>
            <text class="text-sm text-gray-500 line-clamp-2">
              {{ item.content }}
            </text>
            <view class="mt-2 flex justify-between items-center">
              <text class="text-xs text-gray-400">
                {{ formatTime(item.publishTime) }}
              </text>
            </view>
          </view>
        </view>
      </template>

      <!-- 普通公告 -->
      <text v-if="noticeList.length > 0" class="text-sm text-gray-500">
        最新公告
      </text>
      <view
        v-for="item in noticeList.filter(item => !item.isTop)"
        :key="`normal-${item.id}`"
        class="mt-3 p-4 bg-white rounded-lg shadow-sm"
        @click="viewDetail(item.id)"
      >
        <text class="font-semibold text-gray-800">
          {{ item.title }}
        </text>
        <text class="block mt-1 text-sm text-gray-500 line-clamp-2">
          {{ item.content }}
        </text>
        <view class="mt-2 flex justify-between items-center">
          <text class="text-xs text-gray-400">
            {{ formatTime(item.publishTime) }}
          </text>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="noticeList.length === 0 && !loading" class="flex flex-col items-center justify-center py-20">
        <uni-icons type="notification" size="48" color="#9CA3AF" />
        <text class="mt-4 text-gray-500">
          暂无公告
        </text>
      </view>

      <!-- 加载状态 -->
      <view v-if="loading" class="py-4 flex justify-center">
        <uni-load-more status="loading" />
      </view>

      <!-- 没有更多了 -->
      <view v-if="finished && noticeList.length > 0" class="py-4 flex justify-center">
        <text class="text-sm text-gray-400">
          没有更多了
        </text>
      </view>
    </view>
  </view>
</template>

<style>
/* 使用Tailwind CSS，不需要额外样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
